import React,{Component} from 'react';
import { View , Text,ImageBackground,Button,StyleSheet,Image,TouchableOpacity } from 'react-native';
import THNav from '../../../components/THNav'
import { pxToDp } from '../../../utils/stylesKits';
import Swiper from 'react-native-deck-swiper'
import requset from '../../../utils/request'
import {FRIENDS_CARDS,BASE_URI,FRIENDS_LIKE} from '../../../utils/pathMap'
import IconFonts from '../../../components/IconFonts'
import Toast from '../../../utils/toast';
    class Index extends Component{
        params = {
            page:1,
            pagesize:5
        }
        // 总页数
        totalPages = 5;
        state = {
            // 当前被操作的数组索引
            currentIndex:0,
            cards:[]
        }
        constructor(){
            super();
            this.swiperRef = React.createRef();
        }
        componentDidMount(){
            this.getFriendCards()
        }
        // 获取要渲染的数据 
        getFriendCards = async ()=>{
            const res = await requset.privateGet(FRIENDS_CARDS,this.params);
            console.log('123123'+JSON.stringify(res))
            this.totalPages = res.pages;
            this.setState({ cards: [...this.state.cards,...res.data] });
        }
        // 设置用户喜欢不喜欢
        setLike = async (type) =>{
            if(type == 'dislike'){
                this.swiperRef.swipeLeft();
                this.sendLike('dislike')
            }else{
                this.swiperRef.swipeRight();
                this.sendLike('like')
            }
        }
        // 左滑
        onSwipedLeft = async ()=>{
            this.sendLike('dislike')
        }
        // 右滑
        onSwipedRight = async ()=>{
            this.sendLike('like')
        }
        // 发送喜欢不喜欢
        sendLike = async (type)=>{
            const id = this.state.cards[this.state.currentIndex].id;
            const url = FRIENDS_LIKE.replace(":id",id).replace(":type",type);
            const res = await requset.privateGet(url)
            
        }
        // 获取下一页的数据
        onSwipedAll = ()=>{
            // 判断当前页数是不是最后一页
            if(this.params.page>=this.totalPages){
                Toast.message('没有下一页的数据了',1000,'center');
                return;
            }else{
                this.params.page++;
                this.getFriendCards()
            }
        }

        render(){
            const {cards,currentIndex} = this.state;
            // if(!cards[currentIndex]){
            //     return <></>
            // }
            return(
                <View style={{flex:1,backgroundColor:'#fff'}}>
                    <THNav title="探花" />
                    <ImageBackground 
                    style={{height:'60%'}}
                    imageStyle={{height:'100%'}}
                    source={require('../../../res/testsoul_bg.png')}>
                        { cards[currentIndex]?
                    <Swiper
                        key={Date.now()}
                        ref={ref => this.swiperRef = ref}
                        cards={cards}
                        renderCard={(card)=>{
                            return (
                                <View style={styles.card}>
                                   <Image 
                                   source={{uri:BASE_URI+card.header}}
                                   style={{width:'100%',height:'80%'}}
                                   /> 
                                   {/* 网友信息 */}
                                   <View style={{flex:1,alignItems:"center"}}>
                                    <View style={{flexDirection:'row',alignItems:"center"}}>
                                        <Text style={{color:"#555"}}>{card.nick_name}</Text>
                                        <IconFonts style={{fontSize:pxToDp(18),color:card.gender === "女"?"#b564bf":"red"}}
                                        name={card.gender === "女"? "icontanhuanv":"icontanhuanan"} />
                                        <Text style={{color:"#555"}}>{card.age}岁</Text>
                                    </View>
                                    <View style={{flexDirection:'row'}}>
                                        <Text style={{color:"#555"}}>{card.marry}</Text>
                                        <Text style={{color:"#555"}}>|</Text>
                                        <Text style={{color:"#555"}}>{card.xueli}</Text>
                                        <Text style={{color:"#555"}}>|</Text>
                                        <Text style={{color:"#555"}}>{card.agediff<10? '年龄相仿':'有点代沟'}</Text>
                                    </View>
                                </View>
                                </View>
                            )
                        }}
                        onSwiped={()=>{this.setState({ currentIndex:this.state.currentIndex+1  });}}
                        onSwipedAll={()=>{this.onSwipedAll}}
                        onSwipedLeft={this.onSwipedLeft}
                        onSwipedRight={this.onSwipedRight}
                        cardIndex={currentIndex}
                        backgroundColor={'transparent'}
                        cardVerticalMargin={0}
                        stackSize={3}>
                    </Swiper>
                    :<></>}
                    </ImageBackground>
                        
                    {/* 两个小图标 */}
                    <View style={{flexDirection:'row',justifyContent:'space-between',width:"60%",alignSelf:'center',marginTop:pxToDp(40)}}>
                        <TouchableOpacity onPress={this.setLike.bind(this,'dislike')} style={{backgroundColor:"#ebc869",width:pxToDp(60),height:pxToDp(60),borderRadius:pxToDp(30),alignItems:'center',justifyContent:'center'}}>
                            <IconFonts style={{fontSize:pxToDp(30),color:'#fff'}} name="iconbuxihuan" />
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.setLike.bind(this,'like')} style={{backgroundColor:"#fd5213",width:pxToDp(60),height:pxToDp(60),borderRadius:pxToDp(30),alignItems:'center',justifyContent:'center'}}>
                            <IconFonts style={{fontSize:pxToDp(30),color:'#fff'}} name="iconxihuan" />
                        </TouchableOpacity>
                    </View>
                    
                </View>
            );
        }
    }

const styles = StyleSheet.create({
    card:{
        height:'60%',
        borderRadius:4,
        borderWidth:2,
        borderColor:'#E8E8E8',
        backgroundColor:'white'
    },
    text:{
        textAlign:'center',
        fontSize:50,
        backgroundColor:'transparent'
    }
})
export default Index;
